import { memo } from 'react';
import { Handle, Position } from '@xyflow/react';
import { 
  Presentation, 
  Video, 
  FileText, 
  Image, 
  HelpCircle, 
  BarChart, 
  FileCheck, 
  MessageCircle,
  Target,
  Type,
  Edit,
  Layers
} from 'lucide-react';

const iconMap = {
  target: Target,
  messageCircle: MessageCircle,
  edit: Edit,
  barChart: BarChart,
  layers: Layers,
  helpCircle: HelpCircle,
  image: Image,
  type: Type,
  fileText: FileText,
  imageIcon: Image,
  video: Video,
  fileCheck: FileCheck,
  presentation: Presentation,
};

interface NodeData {
  label: string;
  subtitle: string;
  icon: string;
  category: 'interactive' | 'quiz' | 'content' | 'integration';
}

const CompactNode = memo(({ data, selected }: { data: NodeData; selected?: boolean }) => {
  const IconComponent = iconMap[data.icon as keyof typeof iconMap] || FileText;
  
  const categoryStyles = {
    interactive: {
      border: 'hsl(var(--courseware-interactive))',
      bg: 'hsl(var(--courseware-interactive) / 0.05)',
      iconBg: 'hsl(var(--courseware-interactive) / 0.15)'
    },
    quiz: {
      border: 'hsl(var(--courseware-quiz))',
      bg: 'hsl(var(--courseware-quiz) / 0.05)',
      iconBg: 'hsl(var(--courseware-quiz) / 0.15)'
    },
    content: {
      border: 'hsl(var(--courseware-content))',
      bg: 'hsl(var(--courseware-content) / 0.05)',
      iconBg: 'hsl(var(--courseware-content) / 0.15)'
    },
    integration: {
      border: 'hsl(var(--courseware-integration))',
      bg: 'hsl(var(--courseware-integration) / 0.05)',
      iconBg: 'hsl(var(--courseware-integration) / 0.15)'
    }
  };

  const styles = categoryStyles[data.category];

  return (
    <div 
      className={`
        group relative px-4 py-3 rounded-xl border-2 shadow-lg backdrop-blur-sm
        transition-all duration-300 ease-in-out
        min-w-[160px] max-w-[200px]
        ${selected ? 'ring-2 ring-primary/50 shadow-xl scale-105' : 'hover:shadow-xl hover:scale-[1.02]'}
        module-${data.category}
      `}
      style={{ 
        borderColor: styles.border,
        backgroundColor: styles.bg,
        boxShadow: selected 
          ? `0 8px 32px ${styles.border} / 0.3` 
          : '0 4px 20px rgba(0, 0, 0, 0.15)'
      }}
    >
      {/* Input Handle */}
      <Handle
        type="target"
        position={Position.Left}
        className="w-2.5 h-2.5 rounded-full border-2 border-card shadow-sm opacity-0 group-hover:opacity-100 transition-opacity"
        style={{ backgroundColor: styles.border }}
      />
      
      {/* Content */}
      <div className="flex items-center gap-3">
        <div 
          className="p-2 rounded-lg flex items-center justify-center flex-shrink-0 transition-transform group-hover:scale-110"
          style={{
            backgroundColor: styles.iconBg,
            color: styles.border
          }}
        >
          <IconComponent className="w-3.5 h-3.5" />
        </div>
        <div className="flex-1 min-w-0">
          <div className="font-semibold text-sm text-foreground leading-tight">
            {data.label}
          </div>
          <div className="text-xs text-muted-foreground leading-tight">
            {data.subtitle}
          </div>
        </div>
      </div>

      {/* Output Handle */}
      <Handle
        type="source"
        position={Position.Right}
        className="w-2.5 h-2.5 rounded-full border-2 border-card shadow-sm opacity-0 group-hover:opacity-100 transition-opacity"
        style={{ backgroundColor: styles.border }}
      />
    </div>
  );
});

CompactNode.displayName = 'CompactNode';

export { CompactNode };